<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Vue2入门笔记（1） | InsectMk的个人空间</title><meta name="keywords" content="Vue2,学习,Vue入门"><meta name="author" content="InsectMk,3067836615@qq.com"><meta name="copyright" content="InsectMk"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#f7f9fe"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-title" content="Vue2入门笔记（1）"><meta name="application-name" content="Vue2入门笔记（1）"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#f7f9fe"><meta property="og:type" content="article"><meta property="og:title" content="Vue2入门笔记（1）"><meta property="og:url" content="https://insectmk.top/posts/62df11c0/index.html"><meta property="og:site_name" content="InsectMk的个人空间"><meta property="og:description" content="Bilibili黑马程序员Vue2基于Bilibili黑马程序员Vue2+vue3教程的学习笔记（1） 前端工程化 模块化 组件化 规范化 自动化比如开发时热部署  前端工程化具体解决方案：webpack（还有其他的，但是这个较为流行） webpackwebpack是前端项目工程化的具体解决方案。"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2/cover.png"><meta property="article:author" content="InsectMk"><meta property="article:tag" content="[&quot;InsectMk&quot;,&quot;个人博客&quot;]"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2/cover.png"><meta name="description" content="Bilibili黑马程序员Vue2基于Bilibili黑马程序员Vue2+vue3教程的学习笔记（1） 前端工程化 模块化 组件化 规范化 自动化比如开发时热部署  前端工程化具体解决方案：webpack（还有其他的，但是这个较为流行） webpackwebpack是前端项目工程化的具体解决方案。"><link rel="shortcut icon" href="/static/img/website/favicon.jpg"><link rel="canonical" href="https://insectmk.top/posts/62df11c0/"><link rel="preconnect" href="//cdn.cbd.int"><link rel="preconnect" href="//busuanzi.ibruce.info"><meta name="google-site-verification" content="xxx"><meta name="baidu-site-verification" content="code-xxx"><meta name="msvalidate.01" content="xxx"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><script>let GLOBAL_CONFIG={linkPageTop:{enable:!0,title:"与数百名博主无限进步",addFriendPlaceholder:"昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n站点截图（可选）：\n"},peoplecanvas:{enable:!0,img:"https://image.insectmk.cn/hexo-gitee-blog/article/_post/summary/hello-world/cover.jpg"},postHeadAiDescription:void 0,diytitle:void 0,LA51:void 0,greetingBox:void 0,twikooEnvId:"",commentBarrageConfig:void 0,root:"/",preloader:{source:3},friends_vue_info:void 0,navMusic:!0,mainTone:void 0,authorStatus:void 0,algolia:void 0,localSearch:{path:"/search.xml",preload:!0,languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简",rightMenuMsgToTraditionalChinese:"转为繁体",rightMenuMsgToSimplifiedChinese:"转为简体"},noticeOutdate:void 0,highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:330},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,simplehomepage:!0,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{copy:!0,copyrightEbable:!1,limitCount:50,languages:{author:"作者: InsectMk",link:"链接: ",source:"来源: InsectMk的个人空间",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",copySuccess:"复制成功，复制和转载请标注本文地址"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#425AEF",bgDark:"#1f1f1f",position:"top-center"},source:{justifiedGallery:{js:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js",css:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!1,isAnchor:!1,shortcutKey:void 0,autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={configTitle:"InsectMk的个人空间",title:"Vue2入门笔记（1）",postAI:"",pageFillDescription:", 前端工程化, webpack, webpack的基本使用, webpack中的插件, webpack-dev-server, web-webpack-plugin, webpack中的loader（加载器）, 处理高级语法, build配置, 自动清理dist文件夹, Source Map, 只定位行号不暴露源码, webpack取别名, 安装浏览器vue调试工具, Vue, Vue的特性, 数据驱动视图, 双向数据绑定, 工作原理：MVVM, Vue基本使用, Vue指令, 内容渲染指令, v-text, 插值表达式, v-html, 属性渲染指令, v-bind, 事件绑定指令, v-on事件绑定, 双向绑定指令, 条件渲染指令, v-if, v-show, v-elseampv-else-if, 列表渲染指令（循环指令v-for）, Vue过滤器（Filters）, Vue侦听器（watch）, Vue计算属性, axios黑马程序员基于黑马程序员教程的学习笔记前端工程化模块化组件化规范化自动化比如开发时热部署前端工程化具体解决方案还有其他的但是这个较为流行是前端项目工程化的具体解决方案能够压缩代码处理浏览器端兼容性性能优化的基本使用创建项目在项目根目录中创建源代码目录在中创建与安装使用导入导入第三方包并使用变量接收实现奇偶变色在中导入包含以上代码的文件后会出现语法错误因为浏览器不支持语法可以使用来帮我们解决安装相关的两个包让包保存在节点中表示只在开发阶段使用到的包版本好像有问题目前直接安装最新版本就能解决在项目根目录中创建名为的配置文件初始化内容向外导出一个配置对象用来指定构建模式开发生产使用打包速度快代码不会压缩项目体积大使用打包速度慢代码会压缩项目体积小在的阶段下新增脚本也可以叫其他的名字使用执行对应脚本如使用来使用工具它会先读取这个文件然后根据配置在项目根目录生成一个目标目录其中有一个脚本文件并且这个包含与的代码然后再在中引入代码就能够运行了没有兼容性问题与默认打包的入口文件为默认输出文件的路径为可以在配置文件中可以修改默认配置通过节点可以指定导报的入口通过节点指定打包的出口中的插件可以拓展的能力每当修改了源代码就会对项目进行构建和打包使用安装安装后需要对中的命令进行修改使用运行项目会发现程序一直在监听而不会退出一旦源码进行修改项目就会重新打包每次重新部署生成的目标文件并不会放在物理磁盘上而是在内存中能够通过控制台提示的地址访问默认访问此插件提供的服务地址是访问项目根目录为了能够打开地址能够直接访问首页可以将复制一份放在项目根目录中这里就可以用第三方插件来帮我们完成使用安装此插件在配置文件中中配置得到构造函数创建插件实例对象指定源文件的存放路径指定生成文件的存放路径通过节点使插件生效可以让自动打开浏览器也可以配置端口需要在的配置对象中配置节点中的加载器默认只能处理文件为了处理其他文件就需要对应的使用安装处理文件的加载器然后在配置对象的节点增加节点所有第三方模块的匹配规则文件后缀为使用到的插件处理文件是一门预处理语言是一种用来表现或等文件样式的计算机语言扩展了语言增加了变量函数等特性可以被浏览器直接识别需要先编译为运行命令下载对应加载器可以不用下载因为依赖会自动安装并在配置对象的数组进行配置所有第三方模块的匹配规则文件后缀为使用到的插件小图片优化精灵图运行命令在配置对象的数组中添加规则后为参数项指定图片大小只有小于等于这个大小的图片才会被转为格式的图片处理高级语法支持装饰器语法运行下载对应的加载器和的插件这个前面的表示公司的私有包表示这个公司名下的第三方包表示版本排除项不处理第三方包以上只是匹配了规则在项目根目录中还要创建的配置文件来应用旗下的插件插件的插件生命可用的插件配置目前配置后只能将项目生成在内存中如果想发布项目怎么办在文件中的中添加节点自动清理文件夹使用命令进行安装因为生成的代码与源代码不一致就导致报错位置不能与源代码对应保存信息文件存储生成代码位置信息在的配置对象中添加节点只在开发时使用此工具只定位行号不暴露源码取别名将表示源码根目录在配置对象节点中添加以下内容安装浏览器调试工具在安装调试工具下载浏览器插件更多更多工具扩展工具开发者模式安装插件配置插件详情允许访问文件网址用于构建用户界面的前端框架需要学习框架的规范的指令组件路由组件库的特性数据驱动视图将获取到的数据自动渲染到页面结构双向数据绑定在网页中表单负责采集数据负责传递数据工作原理表示当前页面渲染时所依赖的数据源表示当前页面所渲染的结构表示的示例他是的核心基本使用引入表示接收传入数据的变量需要被控制的选择器只会控制第一个被选择的元素传入的数据指令指令是为开发者提供的模板语法用于辅助开发者渲染页面的基本结构指令分为六大类内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令内容渲染指令用在内容节点的指令指令的模板引擎不仅能插入数值还能执行简单的运算会覆盖元素中所有的内容插值表达式插值表达式就是两个大括号英文名只是内容的占位符不会覆盖原有的内容和插值表达式只能渲染文本内容不能渲染标签内容能解决这个问题哈哈哈哈哈哈属性渲染指令用在属性节点的指令加在属性的前面并加一个冒号也可省略只加冒号例变量变量事件绑定指令事件绑定可以使用来省略点击加点击减如何传参点击加点击减使用简写事件绑定指令点击加点击减有内置对象表示原生事件对象点击加点击减事件修饰符加在事件绑定的后面事件修饰符说明阻止默认行为阻止事件冒泡以捕获模式出发当前的事件处理函数绑定的事件只触发一次只有在是当前元素自身时触发事件处理函数阻止默认事件按键修饰符按键修饰符说明按键是时才触发事件按键时时才触发事件双向绑定指令使用设置双向绑定数据能够改变变量变量也能改变即是单向绑定不会改变变量的值只会变量改变在表单元素中使用才有意义指令的修饰符修饰符说明识别绑定的数据为数值自动去除首尾空格中间的变化过程不会同步到变量中条件渲染指令按需控制的显示与隐藏每次动态创建或移除元素如果刚进入页面某些页面默认不需要被展示而且后期也很可能不需要被展示出来这时性能更好这是被控制的元素是动态为元素添加样式来实现元素的显示和隐藏如果频繁显示隐藏用的性能要高这是被控制的元素条件优秀条件良好条件一般差列表渲染指令循环指令使用语法其中是固定指令接收中的数组接收中的元素姓名性别张三男李四女使用语法其中是固定指令接收中的数组接收中的元素是元素下标从起标序号姓名性别张三男李四女官方建议只要用到了指令那么一定要绑定一个属性并且尽量把作为的值这个值只能是字符串或者是数字类型的值不能重复否则会报错使用的值作为的值并没有任何意义因为这个与内容并没有绑定关系他是和元素顺序有关指定的值既能提升性能又防止列表状态絮乱过滤器常用于文本格式化可和属性绑定管道符前面的变量作为管道后面过滤函数的参数过滤器函数应定义到节点下私有过滤器全局过滤器过滤器也能够串联调用例侦听器定义在节点下方法名与需要监听的数据变量名一致监视数据的变化方法格式侦听器新值旧值监听到了值的变化以上的方法侦听器无法在初始化页面时就执行一次可以使用对象格式实现自动触发一次也无法监听对象中的属性变化可以使用对象格式的选项对象格式侦听器侦听器处理函数新值旧值监听到了值的变化控制侦听器是否触发一次默认为深度监听开启深度监听只要对象中任何一个属性变化都会触发对象侦听器默认为直接侦听对象中的某个属性方法名包裹单引号计算属性通过一系列运算后最终得到的属性值实现代码复用放在节点下依赖的属性变化后会自动重新求值按钮所有的计算属性都要定义到节点下计算属性在定义的时候要定义成方法格式作为一个计算属性被定义成了方法格式最终要返回一个生成好的格式字符串是一个专注于网络请求的库还有很多其他的功能过于庞大的基本用法请求的类型请求的地址处理函数给收到的响应套了一层壳真实的数据传参请求方式参数请求体参数返回的是对象参考博文如果调用某个方法返回值是实例则前面可以添加只能用在被修饰的方法中解构后重命名直接发送请求地址参数地址请求体数据",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2022-11-25 15:21:28",postMainColor:""}</script><noscript><style type="text/css">#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:(e,t,a)=>{var o;0!==a&&(o=Date.now(),localStorage.setItem(e,JSON.stringify({value:t,expiry:o+864e5*a})))},get:e=>{var t=localStorage.getItem(e);if(t){t=JSON.parse(t);if(!(Date.now()>t.expiry))return t.value;localStorage.removeItem(e)}}},e.getScript=(o,c={})=>new Promise((t,e)=>{let a=document.createElement("script");a.src=o,a.async=!0,a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},Object.keys(c).forEach(e=>{a.setAttribute(e,c[e])}),document.head.appendChild(a)}),e.getCSS=(o,c=!1)=>new Promise((t,e)=>{let a=document.createElement("link");a.rel="stylesheet",a.href=o,c&&(a.id=c),a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#18171d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#f7f9fe")};var e=saveToLocal.get("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches,a=window.matchMedia("(prefers-color-scheme: light)").matches,o=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!t&&!a&&!o,t=(void 0===e?(a?activateLightMode():t?activateDarkMode():(o||c)&&((a=(new Date).getHours())<=6||18<=a?activateDarkMode:activateLightMode)(),window.matchMedia("(prefers-color-scheme: dark)").addListener(e=>{void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode:activateLightMode)()})):("light"===e?activateLightMode:activateDarkMode)(),saveToLocal.get("aside-status"));void 0!==t&&("hide"===t?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="InsectMk的个人空间" type="application/atom+xml"><link rel="alternate" href="/rss2.xml" title="InsectMk的个人空间" type="application/rss+xml"></head><body data-type="anzhiyu"><div id="web_bg"></div><div id="an_music_bg"></div><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><img class="loading-img nolazyload" alt="加载头像" src="/static/img/head/insectmk.jpg"><div class="loading-image-dot"></div></div></div><script>let preloader={endLoading:()=>{document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",()=>{preloader.endLoading()}),setTimeout(function(){preloader.endLoading()},1e4),document.addEventListener("pjax:send",()=>{preloader.initLoading()}),document.addEventListener("pjax:complete",()=>{preloader.endLoading()})</script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.10/progress_bar/progress_bar.css"><script async src="https://cdn.cbd.int/pace-js@1.2.4/pace.min.js" data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"></script><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><div id="nav-group"><span id="blog_name"><div class="back-home-button"><i class="anzhiyufont anzhiyu-icon-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://insectmk.cn/" title="主博客"><img class="back-menu-item-icon" src="/static/img/website/favicon.jpg" alt="主博客"><span class="back-menu-item-text">主博客</span></a><a class="back-menu-item" href="https://insectmk.top/" title="次博客"><img class="back-menu-item-icon" src="/static/img/website/favicon.jpg" alt="次博客"><span class="back-menu-item-text">次博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://gitee.com/insectmk/chatbot-web" title="智能聊天机器人网站"><img class="back-menu-item-icon" src="https://image.insectmk.cn/hexo-gitee-blog/project/icon/chatbot-web.jpg" alt="智能聊天机器人网站"><span class="back-menu-item-text">智能聊天机器人网站</span></a></div></div></div></div><a id="site-name" href="/" accesskey="h"><div class="title">InsectMk的个人空间</div><i class="anzhiyufont anzhiyu-icon-house-chimney"></i></a></span><div class="mask-name-container"><div id="name-container"><a id="page-name" href="javascript:anzhiyu.scrollToDest(0, 500)">PAGE_NAME</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-home"></use></svg><span>主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-hand-peace"></use></svg><span>娱乐</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/entertainment/gallery/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-images"></use></svg><span>图库</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-comments"></use></svg><span>交流</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/contact/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-paper-plane"></use></svg><span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/contact/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-link"></use></svg><span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-compass"></use></svg><span>目录</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-archive"></use></svg><span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-tags"></use></svg><span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-folder-open"></use></svg><span>归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-server"></use></svg><span>服务</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/server/left4dead2/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-icons-left__dead_"></use></svg><span>求生之路</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/server/minecraft/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-minecraft"></use></svg><span>我的世界</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-clipboard"></use></svg><span>日志</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/log/website/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-website-with-different-sections"></use></svg><span>个人网站</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/log/pc/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-desktop"></use></svg><span>个人电脑</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-bars"></use></svg><span>其他</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/extend/remind/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-note"></use></svg><span>备忘</span></a></li></ul></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-id-card"></use></svg><span>关于</span></a></div></div></div><div id="nav-right"><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机前往一个文章" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-dice"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索🔍" accesskey="s"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span> 搜索</span></a></div><input id="center-console" type="checkbox"><label class="widget" for="center-console" title="中控台" onclick="anzhiyu.switchConsole()"><i class="left"></i><i class="widget center"></i><i class="widget right"></i></label><div id="console"><div class="console-card-group-reward"><ul class="reward-all console-card"><li class="reward-item"><a href="/static/img/website/reward/wechat.png" target="_blank"><img class="post-qr-code-img" alt="微信" src="/static/img/website/reward/wechat.png"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/static/img/website/reward/alipay.png" target="_blank"><img class="post-qr-code-img" alt="支付宝" src="/static/img/website/reward/alipay.png"></a><div class="post-qr-code-desc">支付宝</div></li></ul></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments"><div class="card-content"><div class="author-content-item-tips">互动</div><span class="author-content-item-title">最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div></div><div class="console-card-group-right"><div class="console-card tags"><div class="card-content"><div class="author-content-item-tips">兴趣点</div><span class="author-content-item-title">寻找你感兴趣的领域</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/AOP/" style="font-size:1.05rem">AOP<sup>1</sup></a><a href="/tags/Butterfly/" style="font-size:1.05rem">Butterfly<sup>4</sup></a><a href="/tags/Docker/" style="font-size:1.05rem">Docker<sup>6</sup></a><a href="/tags/ElementUI/" style="font-size:1.05rem">ElementUI<sup>1</sup></a><a href="/tags/Frp/" style="font-size:1.05rem">Frp<sup>1</sup></a><a href="/tags/Hexo/" style="font-size:1.05rem">Hexo<sup>8</sup></a><a href="/tags/IntelliJ-IDEA/" style="font-size:1.05rem">IntelliJ IDEA<sup>1</sup></a><a href="/tags/JDK/" style="font-size:1.05rem">JDK<sup>1</sup></a><a href="/tags/JWT/" style="font-size:1.05rem">JWT<sup>1</sup></a><a href="/tags/Java/" style="font-size:1.05rem">Java<sup>35</sup></a><a href="/tags/Junit/" style="font-size:1.05rem">Junit<sup>1</sup></a><a href="/tags/Leanote/" style="font-size:1.05rem">Leanote<sup>1</sup></a><a href="/tags/Maven/" style="font-size:1.05rem">Maven<sup>2</sup></a><a href="/tags/MyBatisPlus/" style="font-size:1.05rem">MyBatisPlus<sup>1</sup></a><a href="/tags/MySQL5-7/" style="font-size:1.05rem">MySQL5.7<sup>1</sup></a><a href="/tags/Mybatis/" style="font-size:1.05rem">Mybatis<sup>1</sup></a><a href="/tags/MybatisPlus/" style="font-size:1.05rem">MybatisPlus<sup>1</sup></a><a href="/tags/OSS/" style="font-size:1.05rem">OSS<sup>1</sup></a><a href="/tags/Spring/" style="font-size:1.05rem">Spring<sup>2</sup></a><a href="/tags/Spring-Boot/" style="font-size:1.05rem">SpringBoot<sup>6</sup></a><a href="/tags/Vue2/" style="font-size:1.05rem">Vue2<sup>9</sup></a><a href="/tags/Vue3/" style="font-size:1.05rem">Vue3<sup>1</sup></a><a href="/tags/Vuetify/" style="font-size:1.05rem">Vuetify<sup>1</sup></a><a href="/tags/Vuex/" style="font-size:1.05rem">Vuex<sup>1</sup></a><a href="/tags/Waline/" style="font-size:1.05rem">Waline<sup>3</sup></a><a href="/tags/mvc/" style="font-size:1.05rem">mvc<sup>3</sup></a><a href="/tags/mybatis/" style="font-size:1.05rem">mybatis<sup>1</sup></a><a href="/tags/profile/" style="font-size:1.05rem">profile<sup>1</sup></a><a href="/tags/spring/" style="font-size:1.05rem">spring<sup>5</sup></a><a href="/tags/springboot/" style="font-size:1.05rem">springboot<sup>4</sup></a><a href="/tags/transaction/" style="font-size:1.05rem">transaction<sup>1</sup></a><a href="/tags/yaml/" style="font-size:1.05rem">yaml<sup>2</sup></a><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" style="font-size:1.05rem">个人博客<sup>11</sup></a><a href="/tags/%E4%BA%8B%E5%8A%A1/" style="font-size:1.05rem">事务<sup>1</sup></a><a href="/tags/%E5%88%86%E9%A1%B5/" style="font-size:1.05rem">分页<sup>1</sup></a><a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size:1.05rem">前端<sup>1</sup></a><a href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size:1.05rem">服务器<sup>20</sup></a><a href="/tags/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/" style="font-size:1.05rem">毕业设计<sup>14</sup></a><a href="/tags/%E7%A6%85%E9%81%93/" style="font-size:1.05rem">禅道<sup>1</sup></a><a href="/tags/%E7%BB%BF%E8%89%B2%E8%A7%A3%E5%8E%8B/" style="font-size:1.05rem">绿色解压<sup>1</sup></a></div></div><hr></div></div><div class="console-card history"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-box-archiv"></i><span>文章</span></div><div class="card-archives"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多"> <i class="anzhiyufont anzhiyu-icon-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/07/"><span class="card-archive-list-date">七月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">4</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">六月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">五月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">4</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">四月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">8</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">三月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">9</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">二月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/01/"><span class="card-archive-list-date">一月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">8</span><span>篇</span></div></a></li></ul></div><hr></div></div></div><div class="button-group"><div class="console-btn-item"><a class="darkmode_switchbutton" title="显示模式切换" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-moon"></i></a></div><div class="console-btn-item" id="consoleHideAside" onclick="anzhiyu.hideAsideBtn()" title="边栏显示控制"><a class="asideSwitch"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></a></div><div class="console-btn-item" id="consoleMusic" onclick="anzhiyu.musicToggle()" title="音乐开关"><a class="music-switch"><i class="anzhiyufont anzhiyu-icon-music"></i></a></div></div><div class="console-mask" onclick="anzhiyu.hideConsole()" href="javascript:void(0);"></div></div><div class="nav-button" id="nav-totop"><a class="totopbtn" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i><span id="percent" onclick="anzhiyu.scrollToDest(0,500)">0</span></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" title="切换"><i class="anzhiyufont anzhiyu-icon-bars"></i></a></div></div></div></nav></header><main id="blog-container"><div class="layout" id="content-inner"><div id="post"><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original">原创</a><span class="post-meta-categories"><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-inbox post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%AC%94%E8%AE%B0/" itemprop="url">笔记</a></span><span class="article-meta tags"><a class="article-meta__tags" href="/tags/Vue2/" tabindex="-1" itemprop="url"> <span><i class="anzhiyufont anzhiyu-icon-hashtag"></i>Vue2</span></a><a class="article-meta__tags" href="/tags/%E5%AD%A6%E4%B9%A0/" tabindex="-1" itemprop="url"> <span><i class="anzhiyufont anzhiyu-icon-hashtag"></i>学习</span></a><a class="article-meta__tags" href="/tags/Vue%E5%85%A5%E9%97%A8/" tabindex="-1" itemprop="url"> <span><i class="anzhiyufont anzhiyu-icon-hashtag"></i>Vue入门</span></a></span></div></div><h1 class="post-title" itemprop="name headline">Vue2入门笔记（1）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="anzhiyufont anzhiyu-icon-calendar-days post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" itemprop="dateCreated datePublished" datetime="2022-11-13T05:35:28.000Z" title="发表于 2022-11-13 13:35:28">2022-11-13</time><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-history post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" itemprop="dateCreated datePublished" datetime="2022-11-25T07:21:28.000Z" title="更新于 2022-11-25 15:21:28">2022-11-25</time></span></div><div class="meta-secondline"><span class="post-meta-separator"></span><span class="post-meta-wordcount"><i class="anzhiyufont anzhiyu-icon-file-word post-meta-icon" title="文章字数"></i><span class="post-meta-label" title="文章字数">字数总计:</span><span class="word-count" title="文章字数">5.5k</span><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-clock post-meta-icon" title="阅读时长"></i><span class="post-meta-label" title="阅读时长">阅读时长:</span><span>24分钟</span></span><span class="post-meta-separator"></span><span data-flag-title="Vue2入门笔记（1）"><i class="anzhiyufont anzhiyu-icon-fw-eye post-meta-icon"></i><span class="post-meta-label" title="阅读量">阅读量:</span><span class="waline-pageview-count" data-path="/posts/62df11c0/" title="访问量"><i class="anzhiyufont anzhiyu-icon-spinner anzhiyu-spin"></i></span></span><span class="post-meta-separator"> </span><span class="post-meta-position" title="作者IP属地为成都"><i class="anzhiyufont anzhiyu-icon-location-dot"></i>成都</span><span class="post-meta-separator"></span><span class="post-meta-commentcount"><i class="anzhiyufont anzhiyu-icon-comments post-meta-icon"></i><span class="post-meta-label">评论数:</span><a href="/posts/62df11c0/#post-comment"><span class="waline-comment-count" data-path="/posts/62df11c0/"><i class="anzhiyufont anzhiyu-icon-spinner anzhiyu-spin"></i></span></a></span></div></div></div><article class="post-content" id="article-container" itemscope itemtype="https://insectmk.top/posts/62df11c0/"><header><a class="post-meta-categories" href="/categories/%E7%AC%94%E8%AE%B0/" itemprop="url">笔记</a><a href="/tags/Vue2/" tabindex="-1" itemprop="url">Vue2</a><a href="/tags/%E5%AD%A6%E4%B9%A0/" tabindex="-1" itemprop="url">学习</a><a href="/tags/Vue%E5%85%A5%E9%97%A8/" tabindex="-1" itemprop="url">Vue入门</a><h1 id="CrawlerTitle" itemprop="name headline">Vue2入门笔记（1）</h1><span itemprop="author" itemscope itemtype="http://schema.org/Person">InsectMk</span><time itemprop="dateCreated datePublished" datetime="2022-11-13T05:35:28.000Z" title="发表于 2022-11-13 13:35:28">2022-11-13</time><time itemprop="dateCreated datePublished" datetime="2022-11-25T07:21:28.000Z" title="更新于 2022-11-25 15:21:28">2022-11-25</time></header><h1 id="Bilibili黑马程序员Vue2"><a href="#Bilibili黑马程序员Vue2" class="headerlink" title="Bilibili黑马程序员Vue2"></a><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1zq4y1p7ga/?vd_source=43f3f41b9a99cfe3d5248db59a3897c7">Bilibili黑马程序员Vue2</a></h1><p>基于<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1zq4y1p7ga/?vd_source=43f3f41b9a99cfe3d5248db59a3897c7">Bilibili黑马程序员Vue2+vue3</a>教程的学习笔记（1）</p><h2 id="前端工程化"><a href="#前端工程化" class="headerlink" title="前端工程化"></a>前端工程化</h2><ul><li>模块化</li><li>组件化</li><li>规范化</li><li>自动化<br>比如开发时热部署</li></ul><p>前端工程化具体解决方案：<strong>webpack</strong>（还有其他的，但是这个较为流行）</p><h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><p>webpack是前端项目工程化的具体解决方案。</p><p>能够压缩代码、处理浏览器端JavaScript兼容性、性能优化。</p><h3 id="webpack的基本使用"><a href="#webpack的基本使用" class="headerlink" title="webpack的基本使用"></a>webpack的基本使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 创建node项目</span></span><br><span class="line">$ npm init -y</span><br><span class="line"></span><br><span class="line"><span class="comment"># 在项目根目录中创建src源代码目录</span></span><br><span class="line">$ <span class="built_in">mkdir</span> src</span><br><span class="line"></span><br><span class="line"><span class="comment"># 在src中创建index.html与index.js</span></span><br><span class="line">$ <span class="built_in">cd</span> src</span><br><span class="line">$ <span class="built_in">touch</span> index.html</span><br><span class="line">$ <span class="built_in">touch</span> index.js</span><br><span class="line"></span><br><span class="line"><span class="comment"># 安装JQuery</span></span><br><span class="line">$ npm install npm jquery --save</span><br><span class="line">$ npm install npm jquery -S</span><br></pre></td></tr></table></figure><p>使用ES6导入JQuery</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入jquery第三方包，并使用变量$接收</span></span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">&#x27;jquery&#x27;</span></span><br><span class="line"></span><br><span class="line">$(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 实现奇偶变色</span></span><br><span class="line">  $(<span class="string">&#x27;li:odd&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;background-color&#x27;</span>,<span class="string">&#x27;red&#x27;</span>);</span><br><span class="line">  $(<span class="string">&#x27;li:even&#x27;</span>).<span class="title function_">css</span>(<span class="string">&#x27;background-color&#x27;</span>,<span class="string">&#x27;pink&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>在index.html中导入包含以上代码的index.js文件后，会出现语法错误，因为浏览器不支持ES6语法。可以使用webpack来帮我们解决。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 安装webpack相关的两个包，--save-dev让包保存在devDependencies节点中</span></span><br><span class="line"><span class="comment"># --save-dev表示只在开发阶段使用到的包（4.7.2版本好像有问题，目前直接安装最新版本就能解决）</span></span><br><span class="line">$ npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev</span><br><span class="line">$ npm install webpack@5.42.1 webpack-cli@4.7.2 --D</span><br></pre></td></tr></table></figure><p>在项目根目录中，创建名为webpack.config.js的webpack配置文件，初始化内容：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 向外导出一个webpack配置对象</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>  <span class="comment">// mode用来指定构建模式，development（开发） production（生产）</span></span><br><span class="line">  <span class="comment">// 使用development打包速度快，代码不会压缩，项目体积大</span></span><br><span class="line">  <span class="comment">// 使用production打包速度慢，代码会压缩，项目体积小</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在package.json的scripts阶段下，新增dev脚本（也可以叫其他的名字）</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack&quot;</span> <span class="comment">// 使用npm run xxx执行对应脚本，如：npm run dev</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用<code>$ npm run dev</code>来使用webpack工具，它会先读取webpack.config.js这个文件，然后根据配置在项目根目录生成一个dist目标目录，其中有一个main.js脚本文件，并且这个main.js包含index.js与jquery.js的代码</p><p>然后再在index.html中引入main.js代码，就能够运行了，没有兼容性问题。</p><p>webpack4.x与5.x默认打包的入口文件为&#x2F;src&#x2F;index.js，默认输出文件的路径为&#x2F;dist&#x2F;main.js，可以在webpack.config.js配置文件中可以修改默认配置，通过entry节点可以指定导报的入口，通过output节点指定打包的出口。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  <span class="attr">entry</span>: path.<span class="title function_">join</span>(__dirname,<span class="string">&#x27;./src/index.js&#x27;</span>),</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">join</span>(__dirname,<span class="string">&#x27;./dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="webpack中的插件"><a href="#webpack中的插件" class="headerlink" title="webpack中的插件"></a>webpack中的插件</h3><p>可以拓展webpack的能力</p><h4 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h4><p>每当修改了源代码，就会对项目进行构建和打包</p><p>使用<code>$ npm install webpack-dev-server@3.11.2 --save-dev</code>安装</p><p>安装后需要对package.json &gt; script中的dev命令进行修改</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack serve&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用<code>$ npm run dev</code>运行项目，会发现程序一直在监听而不会退出，一旦源码进行修改项目就会重新打包。<strong>每次重新部署生成的目标文件并不会放在物理磁盘上，而是在内存中，能够通过控制台提示的地址访问</strong></p><p>默认访问此插件提供的http服务地址，是访问项目根目录，为了能够打开地址能够直接访问index首页，可以将&#x2F;src&#x2F;index.html复制一份放在项目根目录中，这里就可以用<strong>web-webpack-plugin</strong>第三方插件来帮我们完成</p><h4 id="web-webpack-plugin"><a href="#web-webpack-plugin" class="headerlink" title="web-webpack-plugin"></a>web-webpack-plugin</h4><p>使用<code>$ npm install html-webpack-plugin@5.3.2 -save-dev</code>安装此插件</p><p>在webpack.config.js配置文件中中配置html-webpack-plugin</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 得到构造函数</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建HTML插件实例对象</span></span><br><span class="line"><span class="keyword">const</span> htmlPlugin = <span class="keyword">new</span> <span class="title class_">HtmlPlugin</span>(&#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span>,   <span class="comment">// 指定源文件的存放路径</span></span><br><span class="line">  <span class="attr">filename</span>: <span class="string">&#x27;./index.html&#x27;</span>        <span class="comment">// 指定生成文件的存放路径</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  <span class="attr">plugins</span>: [htmlPlugin]           <span class="comment">// 通过plugins节点，使htmlPlugin插件生效</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以让webpack自动打开浏览器，也可以配置端口。需要在webpack.config.js的配置对象中配置devServer节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">  <span class="attr">open</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;127.0.0.1&#x27;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="number">80</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="webpack中的loader（加载器）"><a href="#webpack中的loader（加载器）" class="headerlink" title="webpack中的loader（加载器）"></a>webpack中的loader（加载器）</h3><p>webpack默认只能处理.js文件，为了处理其他文件就需要对应的loader</p><p>使用<code>$ npm install style-loader@3.0.0 css-loader@5.2.6 -D</code>安装处理CSS文件的加载器，然后在webpack.config.js配置对象的module节点增加rules节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">  <span class="comment">// 所有第三方模块的匹配规则</span></span><br><span class="line">  <span class="attr">rules</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="comment">// 文件后缀为.css</span></span><br><span class="line">      <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">      <span class="comment">// 使用到的插件</span></span><br><span class="line">      <span class="attr">use</span>: [</span><br><span class="line">        <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>处理less文件</p><ul><li>Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。</li><li>less扩展了CSS语言，增加了变量、Mixin、函数等特性。</li><li>css可以被浏览器直接识别，less需要先编译为css。</li></ul><p>运行<code>$ npm install less-loader@10.0.1 less@4.1.1 -D</code>命令下载对应加载器（可以不用下载less，因为less-loader依赖less，会自动安装），并在webpack.config.js配置对象的module &gt; rules数组进行配置。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">  <span class="comment">// 所有第三方模块的匹配规则</span></span><br><span class="line">  <span class="attr">rules</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="comment">// 文件后缀为.css</span></span><br><span class="line">      <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">      <span class="comment">// 使用到的插件</span></span><br><span class="line">      <span class="attr">use</span>: [</span><br><span class="line">        <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;,&#123;</span><br><span class="line">      <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">      <span class="attr">use</span>: [</span><br><span class="line">        <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;less-loader&#x27;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br></pre></td></tr></table></figure><p>小图片优化：base64，精灵图</p><p>运行<code>$ npm install url-loader@4.1.1 file-loader@6.2.0 -D</code>命令，在webpack.config.js配置对象的module &gt; rules数组中添加规则</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">  <span class="attr">rules</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">test</span>: <span class="string">&#x27;/\.jpg|png|gif$/&#x27;</span>,</span><br><span class="line">      <span class="comment">// ?后为参数项</span></span><br><span class="line">      <span class="comment">// limit指定图片大小，（byte），只有小于等于这个大小的图片才会被转为base64格式的图片</span></span><br><span class="line">      <span class="attr">use</span>: <span class="string">&#x27;url-loader?limit=2229&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="处理高级语法"><a href="#处理高级语法" class="headerlink" title="处理高级语法"></a>处理高级语法</h4><p>支持装饰器语法</p><p>运行<code>npm install babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D</code>下载webpack对应的babel加载器和babel的插件</p><p><strong>@babel&#x2F;<a href="mailto:&#x63;&#x6f;&#114;&#101;&#64;&#x37;&#x2e;&#x31;&#x34;&#46;&#x36;">&#x63;&#x6f;&#114;&#101;&#64;&#x37;&#x2e;&#x31;&#x34;&#46;&#x36;</a></strong></p><p>这个前面的@babel表示babel公司的私有包，&#x2F;core表示这个公司名下的core第三方包，@7.14.6表示版本</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: &#123;</span><br><span class="line">  <span class="attr">rules</span>: [</span><br><span class="line">     &#123;</span><br><span class="line">          <span class="attr">test</span>: <span class="regexp">/\.js/</span>,</span><br><span class="line">          <span class="attr">use</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          <span class="comment">// 排除项，不处理第三方包</span></span><br><span class="line">          <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span></span><br><span class="line">        &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>以上只是匹配了规则，在项目根目录中还要创建babel.config.js的配置文件，来应用bale旗下的插件（插件的插件）</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 生命babel可用的插件</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    [<span class="string">&#x27;@babel/plugin-proposal-decorators&#x27;</span>,&#123;<span class="attr">legacy</span>: <span class="literal">true</span>&#125;]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="build配置"><a href="#build配置" class="headerlink" title="build配置"></a>build配置</h2><p>目前配置后webpack只能将项目生成在内存中，如果想发布项目怎么办？</p><p>在package.json文件中的scripts中添加build节点</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;webpack --mode production&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><h2 id="自动清理dist文件夹"><a href="#自动清理dist文件夹" class="headerlink" title="自动清理dist文件夹"></a>自动清理dist文件夹</h2><p>使用<code>$ npm install clean-webpack-plugin --save-dev</code>命令进行安装</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;<span class="title class_">CleanWebpackPlugin</span>&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">	<span class="attr">plugins</span>: [</span><br><span class="line">		<span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>()</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="Source-Map"><a href="#Source-Map" class="headerlink" title="Source Map"></a>Source Map</h2><p>因为生成的代码与源代码不一致，就导致报错位置不能与源代码对应，Source Map保存信息文件，存储生成代码位置信息。在webpack.config.js的配置对象中添加节点<code>devtool: &#39;eval-source-map&#39;</code>，只在开发时使用此工具。</p><h3 id="只定位行号不暴露源码"><a href="#只定位行号不暴露源码" class="headerlink" title="只定位行号不暴露源码"></a>只定位行号不暴露源码</h3><p><code>devtool: &#39;nosources-source-map&#39;</code></p><h2 id="webpack取别名"><a href="#webpack取别名" class="headerlink" title="webpack取别名"></a>webpack取别名</h2><p>将@表示源码根目录，在webpack.config.js配置对象节点中添加以下内容</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">resolve</span>: &#123;</span><br><span class="line">	<span class="attr">alias</span>: &#123;</span><br><span class="line">		<span class="string">&#x27;@&#x27;</span>: path.<span class="title function_">join</span>(__dirname,<span class="string">&#x27;./src/&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="安装浏览器vue调试工具"><a href="#安装浏览器vue调试工具" class="headerlink" title="安装浏览器vue调试工具"></a>安装浏览器vue调试工具</h2><p>在Chrome安装vue调试工具</p><p><a target="_blank" rel="noopener" href="https://devtools.vuejs.org/">下载浏览器插件</a></p><p>更多 -&gt; 更多工具 -&gt; 扩展工具 -&gt; 开发者模式 -&gt; 安装插件</p><p>配置插件 -&gt; 详情 -&gt; 允许访问文件网址</p><h2 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h2><p>用于构建用户界面的前端框架</p><p>需要学习vue框架的规范</p><p>vue的指令、组件、路由、Vuex、Vue组件库</p><h3 id="Vue的特性"><a href="#Vue的特性" class="headerlink" title="Vue的特性"></a>Vue的特性</h3><h4 id="数据驱动视图"><a href="#数据驱动视图" class="headerlink" title="数据驱动视图"></a>数据驱动视图</h4><p>Vue将获取到的数据自动渲染到页面结构</p><h4 id="双向数据绑定"><a href="#双向数据绑定" class="headerlink" title="双向数据绑定"></a>双向数据绑定</h4><p>在网页中，form表单负责采集数据，ajax负责传递数据</p><h4 id="工作原理：MVVM"><a href="#工作原理：MVVM" class="headerlink" title="工作原理：MVVM"></a>工作原理：MVVM</h4><p>Model、View、ViewModel</p><p>Model：表示当前页面渲染时所依赖的数据源<br>View： 表示当前页面所渲染的DOM结构<br>ViewModel： 表示vue的示例，他是MVVM的核心</p><h3 id="Vue基本使用"><a href="#Vue基本使用" class="headerlink" title="Vue基本使用"></a>Vue基本使用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 引入Vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- username表示接收传入数据的变量 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span>&#123;&#123; username &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="comment">// 需要被控制的dom，选择器只会控制第一个被选择的元素</span></span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="comment">// 传入的数据</span></span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: <span class="string">&#x27;zhangsan&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="Vue指令"><a href="#Vue指令" class="headerlink" title="Vue指令"></a>Vue指令</h4><p>指令是为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构</p><p>指令分为六大类</p><ul><li>内容渲染指令</li><li>属性绑定指令</li><li>事件绑定指令</li><li>双向绑定指令</li><li>条件渲染指令</li><li>列表渲染指令</li></ul><h5 id="内容渲染指令"><a href="#内容渲染指令" class="headerlink" title="内容渲染指令"></a>内容渲染指令</h5><p>用在内容节点的指令，指令的模板引擎不仅能插入数值，还能执行简单的javascript运算</p><h6 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h6><p>会覆盖元素中所有的内容</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">&quot;gender&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: <span class="string">&#x27;lisi&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">gender</span>: <span class="string">&#x27;man&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h6 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h6><p>插值表达式就是两个大括号，英文名Mustache，只是内容的占位符，不会覆盖原有的内容。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; username &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; gender &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: <span class="string">&#x27;lisi&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">gender</span>: <span class="string">&#x27;man&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h6 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a><code>v-html</code></h6><p><code>v-text</code>和插值表达式只能渲染文本内容，不能渲染html标签内容，<code>v-html</code>能解决这个问题</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">&quot;info&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">info</span>: <span class="string">&#x27;&lt;h1&gt;哈哈哈哈哈哈&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h5 id="属性渲染指令"><a href="#属性渲染指令" class="headerlink" title="属性渲染指令"></a>属性渲染指令</h5><p>用在属性节点的指令</p><h6 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a><code>v-bind</code></h6><p>加在属性的前面并加一个冒号，也可省略<code>v-bind</code>，只加冒号</p><p>例：<code>v-bind:img=&quot;变量&quot;</code>or<code>:img=&quot;变量&quot;</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">&quot;photo&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">photo</span>: <span class="string">&#x27;http://xxx.com/xxx.img&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h5 id="事件绑定指令"><a href="#事件绑定指令" class="headerlink" title="事件绑定指令"></a>事件绑定指令</h5><h6 id="v-on事件绑定"><a href="#v-on事件绑定" class="headerlink" title="v-on事件绑定"></a><code>v-on</code>事件绑定</h6><p>可以使用<code>@</code>来省略<code>v-on:</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; count &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;add&quot;</span>&gt;</span>点击加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;sub&quot;</span>&gt;</span>点击减<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">add</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;ok&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">			&#125;,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">sub</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;okk&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>如何传参</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; count &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;add(2)&quot;</span>&gt;</span>点击加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;sub(1)&quot;</span>&gt;</span>点击减<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">add</span>: <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">sub</span>: <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>使用<code>@</code>简写事件绑定指令</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; count &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;add(2)&quot;</span>&gt;</span>点击加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sub(1)&quot;</span>&gt;</span>点击减<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">add</span>: <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">sub</span>: <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Vue有内置对象，$event表示js原生事件对象</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; count &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;add($event,2)&quot;</span>&gt;</span>点击加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sub(1)&quot;</span>&gt;</span>点击减<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">add</span>: <span class="keyword">function</span>(<span class="params">e,num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>);</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">sub</span>: <span class="keyword">function</span>(<span class="params">num</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>事件修饰符</strong></p><p>加在事件绑定的后面</p><table><thead><tr><th align="left">事件修饰符</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left">.prevent</td><td align="left">阻止默认行为</td></tr><tr><td align="left">.stop</td><td align="left">阻止事件冒泡</td></tr><tr><td align="left">.capture</td><td align="left">以捕获模式出发当前的事件处理函数</td></tr><tr><td align="left">.once</td><td align="left">绑定的事件只触发一次</td></tr><tr><td align="left">.self</td><td align="left">只有在event.target是当前元素自身时触发事件处理函数</td></tr></tbody></table><p><strong>阻止默认事件</strong></p><p><code>@click.prevent=&quot;show()&quot;</code></p><p><strong>按键修饰符</strong></p><table><thead><tr><th align="left">按键修饰符</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left">.enter</td><td align="left">按键是enter时才触发事件</td></tr><tr><td align="left">.esc</td><td align="left">按键时esc时才触发事件</td></tr><tr><td align="left">…</td><td align="left">…</td></tr></tbody></table><h5 id="双向绑定指令"><a href="#双向绑定指令" class="headerlink" title="双向绑定指令"></a>双向绑定指令</h5><p>使用<code>v-model</code>设置双向绑定数据，dom能够改变变量，变量也能改变dom</p><p><code>v-bind</code>即<code>:</code>是单向绑定，不会改变变量的值，只会变量改变dom</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;content&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">content</span>: <span class="string">&#x27;hello world&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>在表单元素中使用才有意义</strong></p><p><code>v-model</code>指令的修饰符</p><table><thead><tr><th align="left"><code>v-model</code>修饰符</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left">.number</td><td align="left">识别绑定的数据为数值</td></tr><tr><td align="left">.trim</td><td align="left">自动去除首尾空格</td></tr><tr><td align="left">.lazy</td><td align="left">中间的变化过程不会同步到变量中</td></tr></tbody></table><h5 id="条件渲染指令"><a href="#条件渲染指令" class="headerlink" title="条件渲染指令"></a>条件渲染指令</h5><p>按需控制DOM的显示与隐藏</p><h6 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a><code>v-if</code></h6><p>每次动态创建或移除元素</p><p>如果刚进入页面，某些页面默认不需要被展示，而且后期也很可能不需要被展示出来，这时<code>v-if</code>性能更好</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span>&gt;</span>这是被v-if控制的元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">flag</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h6 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a><code>v-show</code></h6><p>是动态为元素添加<code>display: none</code>样式，来实现元素的显示和隐藏</p><p>如果频繁显示隐藏，用<code>v-show</code>的性能要高</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">&quot;flag&quot;</span>&gt;</span>这是被v-show控制的元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">flag</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h6 id="v-else-v-else-if"><a href="#v-else-v-else-if" class="headerlink" title="v-else&amp;v-else-if"></a><code>v-else</code>&amp;<code>v-else-if</code></h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">&quot;&lt;条件&gt;&quot;</span>&gt;</span>优秀<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">&quot;&lt;条件&gt;&quot;</span>&gt;</span>良好<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">&quot;&lt;条件&gt;&quot;</span>&gt;</span>一般<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span>差<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h5 id="列表渲染指令（循环指令v-for）"><a href="#列表渲染指令（循环指令v-for）" class="headerlink" title="列表渲染指令（循环指令v-for）"></a>列表渲染指令（循环指令<code>v-for</code>）</h5><p>使用语法<code>item in items</code>，其中<code>in</code>是固定指令，items接收data中的数组，item接收items中的元素</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span>性别<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">&quot;item in items&quot;</span> <span class="attr">:title</span>=<span class="string">&quot;item.name&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.gender &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">item</span>: [</span></span><br><span class="line"><span class="language-javascript">				&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span></span></span><br><span class="line"><span class="language-javascript">				&#125;,</span></span><br><span class="line"><span class="language-javascript">				&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">name</span>: <span class="string">&#x27;李四&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">gender</span>: <span class="string">&#x27;女&#x27;</span></span></span><br><span class="line"><span class="language-javascript">				&#125;</span></span><br><span class="line"><span class="language-javascript">			]</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>使用语法<code>(item,index) in items</code>，其中<code>in</code>是固定指令，items接收data中的数组，item接收items中的元素，index是元素下标，从0起标</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span>序号<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">th</span>&gt;</span>性别<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">&quot;(item,index) in items&quot;</span> <span class="attr">:title</span>=<span class="string">&quot;item.name + (index + 1)&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; index + 1 &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.gender &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">item</span>: [</span></span><br><span class="line"><span class="language-javascript">				&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span></span></span><br><span class="line"><span class="language-javascript">				&#125;,</span></span><br><span class="line"><span class="language-javascript">				&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">name</span>: <span class="string">&#x27;李四&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">					<span class="attr">gender</span>: <span class="string">&#x27;女&#x27;</span></span></span><br><span class="line"><span class="language-javascript">				&#125;</span></span><br><span class="line"><span class="language-javascript">			]</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>官方建议：</strong>只要用到了<code>v-for</code>指令，那么一定要绑定一个<code>:key</code>属性，并且尽量把<code>item.id</code>作为<code>:key</code>的值，这个值只能是字符串或者是数字类型，<code>:key</code>的值不能重复，否则会报错<code>Buplicat keys detected</code></p><p>使用index的值作为key的值并没有任何意义，因为这个index与内容并没有绑定关系，他是和元素顺序有关</p><p>指定key的值既能提升性能、又防止列表状态絮乱</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">&quot;(item,index) in items&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="Vue过滤器（Filters）"><a href="#Vue过滤器（Filters）" class="headerlink" title="Vue过滤器（Filters）"></a>Vue过滤器（Filters）</h4><p>常用于文本格式化，可和<code>v-bind</code>属性绑定，管道符<code>|</code></p><p>前面的变量作为管道后面过滤函数的参数，过滤器函数应定义到filters节点下</p><p><strong>私有过滤器</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; message | toUp &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">message</span>: <span class="string">&#x27;hello&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">filter</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">toUp</span>: <span class="keyword">function</span>(<span class="params">message</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(message);</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">return</span> message + <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>全局过滤器</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;capi&#x27;</span>,<span class="keyword">function</span>(<span class="params">str</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="keyword">const</span> first = str.<span class="title function_">charAt</span>(<span class="number">0</span>).<span class="title function_">toUpperCase</span>();</span></span><br><span class="line"><span class="language-javascript">		<span class="keyword">const</span> other = str.<span class="title function_">slice</span>(<span class="number">1</span>);</span></span><br><span class="line"><span class="language-javascript">		<span class="keyword">return</span> first + other;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>过滤器也能够串联调用，例：<code>item.time | dateformat | xxx | yyy | zzz</code></p><h4 id="Vue侦听器（watch）"><a href="#Vue侦听器（watch）" class="headerlink" title="Vue侦听器（watch）"></a>Vue侦听器（watch）</h4><p>定义在watch节点下，方法名与需要监听的数据变量名一致，监视数据的变化</p><p><strong>方法格式侦听器</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;username&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="title function_">username</span>(<span class="params">newVal,oldVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;新值：&#x27;</span> + newVal);</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;旧值：&#x27;</span> + oldVal);</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;监听到了username值的变化&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>以上的方法侦听器无法在初始化页面时就执行一次，可以使用对象格式实现自动触发一次</p><p>也无法监听对象中的属性变化，可以使用对象格式的deep选项</p><p><strong>对象格式侦听器</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;username&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">username</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">// 侦听器处理函数</span></span></span><br><span class="line"><span class="language-javascript">				<span class="title function_">handler</span> (newVal,oldVal) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;新值：&#x27;</span> + newVal);</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;旧值：&#x27;</span> + oldVal);</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;监听到了username值的变化&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">				&#125;</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">// 控制侦听器是否触发一次，默认为false</span></span></span><br><span class="line"><span class="language-javascript">				<span class="attr">immediate</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>深度监听</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;info.username&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">info</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="attr">username</span>: <span class="string">&#x27;admin&#x27;</span></span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">info</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="title function_">handler</span>(<span class="params">newVal,oldVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="variable language_">console</span>.<span class="title function_">log</span>(newVal);</span></span><br><span class="line"><span class="language-javascript">				&#125;,</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">// 开启深度监听，只要对象中任何一个属性变化，都会触发对象侦听器，默认为false</span></span></span><br><span class="line"><span class="language-javascript">				<span class="attr">deep</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>直接侦听对象中的某个属性</strong></p><p>方法名包裹单引号</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;info.username&quot;</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">info</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="attr">username</span>: <span class="string">&#x27;admin&#x27;</span></span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="string">&#x27;info.username&#x27;</span>(newVal) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(newVal);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="Vue计算属性"><a href="#Vue计算属性" class="headerlink" title="Vue计算属性"></a>Vue计算属性</h4><p>通过一系列运算后，最终得到的属性值（实现代码复用），放在computed节点下</p><p>依赖的属性变化后会自动重新求值</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">	r:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;r&quot;</span> &gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">	g:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;g&quot;</span> &gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">	b:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;b&quot;</span> &gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;&#x27;background-color:&#x27; + rgb&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">&quot;rgb&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;show&quot;</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">r</span>: <span class="number">100</span>,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">g</span>: <span class="number">100</span>,</span></span><br><span class="line"><span class="language-javascript">			<span class="attr">b</span>: <span class="number">100</span></span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="title function_">show</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">rgb</span>);</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;,</span></span><br><span class="line"><span class="language-javascript">		<span class="comment">// 所有的计算属性，都要定义到computed节点下</span></span></span><br><span class="line"><span class="language-javascript">		<span class="comment">// 计算属性在定义的时候，要定义成方法格式</span></span></span><br><span class="line"><span class="language-javascript">		<span class="attr">computed</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">			<span class="comment">// rgb作为一个计算属性，被定义成了方法格式</span></span></span><br><span class="line"><span class="language-javascript">			<span class="comment">// 最终要返回一个生成好的rgb(x,y,z)格式字符串</span></span></span><br><span class="line"><span class="language-javascript">			<span class="title function_">rgb</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">return</span> <span class="string">`rgb(<span class="subst">$&#123;<span class="variable language_">this</span>.r&#125;</span>,<span class="subst">$&#123;<span class="variable language_">this</span>.g&#125;</span>,<span class="subst">$&#123;<span class="variable language_">this</span>.b&#125;</span>)`</span>;</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		&#125;</span></span><br><span class="line"><span class="language-javascript">		</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><p>axios是一个专注于网络请求的库，jQuery还有很多其他的功能，过于庞大</p><p>cdn<code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;&gt;&lt;/script&gt;</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// axios的基本用法</span></span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">	<span class="attr">method</span>: <span class="string">&#x27;请求的类型&#x27;</span>,</span><br><span class="line">	<span class="attr">url</span>: <span class="string">&#x27;请求的url地址&#x27;</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">	<span class="comment">// 处理函数</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">data</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>axios给收到的响应套了一层壳</p><ul><li>config</li><li>data:{}	真实的数据</li><li>headers</li><li>request</li><li>status</li><li>statusText</li></ul><p><strong>axios传参</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">aixos</span>(&#123;</span><br><span class="line">	<span class="comment">// 请求方式</span></span><br><span class="line">	<span class="attr">method</span>: <span class="string">&#x27;GET&#x27;</span>,</span><br><span class="line">	<span class="attr">url</span>: <span class="string">&#x27;http://www.baidu.com&#x27;</span>,</span><br><span class="line">	<span class="comment">// url参数</span></span><br><span class="line">	<span class="attr">params</span>: &#123;</span><br><span class="line">		<span class="attr">id</span>: <span class="number">1</span></span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="comment">// 请求体参数</span></span><br><span class="line">	<span class="attr">data</span>: &#123;</span><br><span class="line">		<span class="attr">password</span>: <span class="string">&#x27;13424&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">data</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><strong>axios返回的是Promise对象</strong></p><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_41817034/article/details/80492315">Promise参考博文</a></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#btnPost&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">async</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="comment">// 如果调用某个方法返回值是Promise实例，则前面可以添加await</span></span><br><span class="line">	<span class="comment">// await只能用在被async“修饰的方法中”</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">// 解构后重命名</span></span><br><span class="line">	<span class="keyword">const</span> &#123; <span class="attr">data</span>: res &#125; = <span class="keyword">await</span> <span class="title function_">axios</span>(&#123;</span><br><span class="line">		<span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line">		<span class="attr">url</span>: <span class="string">&#x27;http://www.liulongbin.top:3006/api/post&#x27;</span>,</span><br><span class="line">		<span class="attr">data</span>: &#123;</span><br><span class="line">			<span class="attr">name</span>: <span class="string">&#x27;zs&#x27;</span>,</span><br><span class="line">			<span class="attr">age</span>: <span class="number">20</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><strong>axios直接发送请求</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">axios.<span class="title function_">get</span>(<span class="string">&#x27;url地址&#x27;</span>,&#123;</span><br><span class="line">	<span class="comment">// 参数</span></span><br><span class="line">	<span class="attr">params</span>: &#123;&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">axios.<span class="title function_">post</span>(<span class="string">&#x27;url地址&#x27;</span>,&#123;post请求体数据&#125;)</span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="copyright-cc-box"><i class="anzhiyufont anzhiyu-icon-copyright"></i></div><div class="post-copyright__author_box"><a class="post-copyright__author_img" target="_blank" rel="noopener" href="https://insectmk.cn" title="头像"><img class="post-copyright__author_img_back" src="/static/img/head/insectmk.jpg" title="头像" alt="头像"><img class="post-copyright__author_img_front" src="/static/img/head/insectmk.jpg" title="头像" alt="头像"></a><div class="post-copyright__author_name">InsectMk</div><div class="post-copyright__author_desc">今天特别开心！</div></div><div class="post-copyright__post__info"><a class="post-copyright__original" title="该文章为原创文章，注意版权协议" href="https://insectmk.top/posts/62df11c0/">原创</a><a class="post-copyright-title"><span onclick='rm.copyPageUrl("https://insectmk.top/posts/62df11c0/")'>Vue2入门笔记（1）</span></a></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div class="rewardLeftButton"></div><div class="shareRight"><div class="share-link mobile"><div class="share-qrcode"><div class="share-button" title="使用手机访问这篇文章"><i class="anzhiyufont anzhiyu-icon-qrcode"></i></div><div class="share-main"><div class="share-main-all"><div id="qrcode" title="https://insectmk.top/posts/62df11c0/"></div><div class="reward-dec">使用手机访问这篇文章</div></div></div></div></div><div class="share-link weibo"><a class="share-button" target="_blank" href="https://service.weibo.com/share/share.php?title=undefined&amp;url=https://insectmk.top/posts/62df11c0/&amp;pic=undefined" rel="external nofollow noreferrer noopener"><i class="anzhiyufont anzhiyu-icon-weibo"></i></a></div><script>function copyCurrentPageUrl(){var e=window.location.href,t=document.createElement("input");t.setAttribute("value",e),document.body.appendChild(t),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),document.body.removeChild(t)}</script><div class="share-link copyurl"><div class="share-button" id="post-share-url" title="复制链接" onclick="copyCurrentPageUrl()"><i class="anzhiyufont anzhiyu-icon-link"></i></div></div></div></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://insectmk.top" target="_blank">InsectMk的个人空间</a>！</span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__box"><div class="post-meta__box__tag-list"><a class="post-meta__box__tags" href="/tags/Vue2/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span>Vue2<span class="tagsPageCount">9</span></a><a class="post-meta__box__tags" href="/tags/%E5%AD%A6%E4%B9%A0/"><span class="tags-punctuation"> <i class="anzhiyufont anzhiyu-icon-tag"></i></span>学习<span class="tagsPageCount">8</span></a><a class="post-meta__box__tags" href="/tags/Vue%E5%85%A5%E9%97%A8/"><span class="tags-punctuation"> <i class="anzhiyufont anzhiyu-icon-tag"></i></span>Vue入门<span class="tagsPageCount">4</span></a></div></div></div><div class="post_share"><div class="social-share" data-image="https://image.insectmk.cn/hexo-gitee-blog/cover/github-insectmk.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.cbd.int/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/441e328e/"><img class="prev-cover" src="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/nodejs/cover.png" onerror='onerror=null,src="/static/img/website/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">NodeJS入门笔记</div></div></a></div><div class="next-post pull-right"><a href="/posts/706abe2e/"><img class="next-cover" src="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2-2/cover.png" onerror='onerror=null,src="/static/img/website/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vue2入门笔记（2）</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="anzhiyufont anzhiyu-icon-thumbs-up fa-fw" style="font-size:1.5rem;margin-right:4px"></i><span>喜欢这篇文章的人也看了</span></div><div class="relatedPosts-list"><div><a href="/posts/706abe2e/" title="Vue2入门笔记（2）"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2-2/cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2022-11-25</div><div class="title">Vue2入门笔记（2）</div></div></a></div><div><a href="/posts/c8d6d94b/" title="Vue2入门笔记（3）"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2-3/cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2022-11-27</div><div class="title">Vue2入门笔记（3）</div></div></a></div><div><a href="/posts/5501e1f2/" title="Vue2入门笔记（4）"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/article/_post/notes/vue2-4/cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2022-11-27</div><div class="title">Vue2入门笔记（4）</div></div></a></div><div><a href="/posts/2812ec90/" title="Vue2导航守卫"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/cover/vue.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2023-10-08</div><div class="title">Vue2导航守卫</div></div></a></div><div><a href="/posts/444569cc/" title="Vue2使用路由"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/cover/vue.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2023-10-08</div><div class="title">Vue2使用路由</div></div></a></div><div><a href="/posts/f9f47703/" title="Vue2-ElmentUI 表单数据验证"><img class="cover" src="https://image.insectmk.cn/hexo-gitee-blog/cover/vue.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="anzhiyufont anzhiyu-icon-calendar-days fa-fw"></i> 2024-03-18</div><div class="title">Vue2-ElmentUI 表单数据验证</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="anzhiyufont anzhiyu-icon-comments"></i><span> 评论</span></div><div class="comment-randomInfo"><a onclick="anzhiyu.addRandomCommentInfo()" href="javascript:void(0)">匿名评论</a><a href="/privacy" style="margin-left:4px">隐私政策</a></div></div><div class="comment-wrap"><div><div id="waline-wrap"></div></div></div></div><div class="comment-barrage"></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-content"><div class="author-info-avatar"><img class="avatar-img" src="/static/img/head/insectmk.jpg" onerror='this.onerror=null,this.src="/static/img/website/friend_404.gif"' alt="avatar"></div><div class="author-info__description"><div style="line-height:1.38;margin:.6rem 0;text-align:justify;color:rgba(255,255,255,.8)">这有关于<b style="color:#fff">程序开发、部署</b>相关的问题和看法，还有<b style="color:#fff">软件推荐</b>和<b style="color:#fff">分享</b>。</div><div style="line-height:1.38;margin:.6rem 0;text-align:justify;color:rgba(255,255,255,.8)">相信你可以在这里找到对你有用的<b style="color:#fff">知识</b>和<b style="color:#fff">教程</b>。</div></div><div class="author-info__bottom-group"><a class="author-info__bottom-group-left" href="/"><h1 class="author-info__name">InsectMk</h1><div class="author-info__desc">今天特别开心！</div></a><div class="card-info-social-icons is-center"><a class="social-icon faa-parent animated-hover" href="https://gitee.com/insectmk" target="_blank" title="Gitee"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-gitee"></use></svg></a><a class="social-icon faa-parent animated-hover" href="/static/img/website/contact/qq.png" target="_blank" title="QQ"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-qq"></use></svg></a><a class="social-icon faa-parent animated-hover" href="/static/img/website/contact/wechat.png" target="_blank" title="WeChat"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-wechat"></use></svg></a><a class="social-icon faa-parent animated-hover" href="/atom.xml" target="_blank" title="订阅-ATOM"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-rss"></use></svg></a><a class="social-icon faa-parent animated-hover" href="mailto:3067836615@qq.com" target="_blank" title="Email"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-youxiang-"></use></svg></a></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bars"></i><span>文章目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Bilibili%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98Vue2"><span class="toc-number">1.</span> <span class="toc-text">Bilibili黑马程序员Vue2</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96"><span class="toc-number">1.1.</span> <span class="toc-text">前端工程化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack"><span class="toc-number">1.2.</span> <span class="toc-text">webpack</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.2.1.</span> <span class="toc-text">webpack的基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E4%B8%AD%E7%9A%84%E6%8F%92%E4%BB%B6"><span class="toc-number">1.2.2.</span> <span class="toc-text">webpack中的插件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack-dev-server"><span class="toc-number">1.2.2.1.</span> <span class="toc-text">webpack-dev-server</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#web-webpack-plugin"><span class="toc-number">1.2.2.2.</span> <span class="toc-text">web-webpack-plugin</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E4%B8%AD%E7%9A%84loader%EF%BC%88%E5%8A%A0%E8%BD%BD%E5%99%A8%EF%BC%89"><span class="toc-number">1.2.3.</span> <span class="toc-text">webpack中的loader（加载器）</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%84%E7%90%86%E9%AB%98%E7%BA%A7%E8%AF%AD%E6%B3%95"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">处理高级语法</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#build%E9%85%8D%E7%BD%AE"><span class="toc-number">1.3.</span> <span class="toc-text">build配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E6%B8%85%E7%90%86dist%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">1.4.</span> <span class="toc-text">自动清理dist文件夹</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Source-Map"><span class="toc-number">1.5.</span> <span class="toc-text">Source Map</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AA%E5%AE%9A%E4%BD%8D%E8%A1%8C%E5%8F%B7%E4%B8%8D%E6%9A%B4%E9%9C%B2%E6%BA%90%E7%A0%81"><span class="toc-number">1.5.1.</span> <span class="toc-text">只定位行号不暴露源码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack%E5%8F%96%E5%88%AB%E5%90%8D"><span class="toc-number">1.6.</span> <span class="toc-text">webpack取别名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%B5%8F%E8%A7%88%E5%99%A8vue%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7"><span class="toc-number">1.7.</span> <span class="toc-text">安装浏览器vue调试工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue"><span class="toc-number">1.8.</span> <span class="toc-text">Vue</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%9A%84%E7%89%B9%E6%80%A7"><span class="toc-number">1.8.1.</span> <span class="toc-text">Vue的特性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E9%A9%B1%E5%8A%A8%E8%A7%86%E5%9B%BE"><span class="toc-number">1.8.1.1.</span> <span class="toc-text">数据驱动视图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="toc-number">1.8.1.2.</span> <span class="toc-text">双向数据绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%EF%BC%9AMVVM"><span class="toc-number">1.8.1.3.</span> <span class="toc-text">工作原理：MVVM</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.8.2.</span> <span class="toc-text">Vue基本使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.</span> <span class="toc-text">Vue指令</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E5%AE%B9%E6%B8%B2%E6%9F%93%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.1.</span> <span class="toc-text">内容渲染指令</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#v-text"><span class="toc-number">1.8.2.1.1.1.</span> <span class="toc-text">v-text</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">1.8.2.1.1.2.</span> <span class="toc-text">插值表达式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#v-html"><span class="toc-number">1.8.2.1.1.3.</span> <span class="toc-text">v-html</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E6%B8%B2%E6%9F%93%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.2.</span> <span class="toc-text">属性渲染指令</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#v-bind"><span class="toc-number">1.8.2.1.2.1.</span> <span class="toc-text">v-bind</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.3.</span> <span class="toc-text">事件绑定指令</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#v-on%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">1.8.2.1.3.1.</span> <span class="toc-text">v-on事件绑定</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.4.</span> <span class="toc-text">双向绑定指令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%E6%8C%87%E4%BB%A4"><span class="toc-number">1.8.2.1.5.</span> <span class="toc-text">条件渲染指令</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#v-if"><span class="toc-number">1.8.2.1.5.1.</span> <span class="toc-text">v-if</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#v-show"><span class="toc-number">1.8.2.1.5.2.</span> <span class="toc-text">v-show</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#v-else-v-else-if"><span class="toc-number">1.8.2.1.5.3.</span> <span class="toc-text">v-else&amp;v-else-if</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%E6%8C%87%E4%BB%A4%EF%BC%88%E5%BE%AA%E7%8E%AF%E6%8C%87%E4%BB%A4v-for%EF%BC%89"><span class="toc-number">1.8.2.1.6.</span> <span class="toc-text">列表渲染指令（循环指令v-for）</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%88Filters%EF%BC%89"><span class="toc-number">1.8.2.2.</span> <span class="toc-text">Vue过滤器（Filters）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E4%BE%A6%E5%90%AC%E5%99%A8%EF%BC%88watch%EF%BC%89"><span class="toc-number">1.8.2.3.</span> <span class="toc-text">Vue侦听器（watch）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.2.4.</span> <span class="toc-text">Vue计算属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#axios"><span class="toc-number">1.8.2.5.</span> <span class="toc-text">axios</span></a></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-history"></i><span>最近发布</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/98f3f974/" title="美化你的Github个人主页"><img src="https://image.insectmk.cn/hexo-gitee-blog/cover/github-insectmk.jpg" onerror='this.onerror=null,this.src="/static/img/website/404.jpg"' alt="美化你的Github个人主页"></a><div class="content"><a class="title" href="/posts/98f3f974/" title="美化你的Github个人主页">美化你的Github个人主页</a><time datetime="2024-07-30T02:52:23.000Z" title="发表于 2024-07-30 10:52:23">2024-07-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/10d64ca8/" title="我的Hexo博客多主题同时部署的实现思路（Butterfly+安知鱼）"><img src="https://image.insectmk.cn/hexo-gitee-blog/cover/hexo-butterfly.jpg" onerror='this.onerror=null,this.src="/static/img/website/404.jpg"' alt="我的Hexo博客多主题同时部署的实现思路（Butterfly+安知鱼）"></a><div class="content"><a class="title" href="/posts/10d64ca8/" title="我的Hexo博客多主题同时部署的实现思路（Butterfly+安知鱼）">我的Hexo博客多主题同时部署的实现思路（Butterfly+安知鱼）</a><time datetime="2024-07-30T01:30:07.000Z" title="发表于 2024-07-30 09:30:07">2024-07-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/129b7f4a/" title="使用Spring AI对接Ollama搭建自己的智能问答网站"><img src="https://image.insectmk.cn/hexo-gitee-blog/cover/ollama.jpg" onerror='this.onerror=null,this.src="/static/img/website/404.jpg"' alt="使用Spring AI对接Ollama搭建自己的智能问答网站"></a><div class="content"><a class="title" href="/posts/129b7f4a/" title="使用Spring AI对接Ollama搭建自己的智能问答网站">使用Spring AI对接Ollama搭建自己的智能问答网站</a><time datetime="2024-07-20T02:45:24.000Z" title="发表于 2024-07-20 10:45:24">2024-07-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/9c83ed78/" title="无需更改源码！让你的Hexo的文章在首页隐藏"><img src="https://image.insectmk.cn/hexo-gitee-blog/cover/hexo-hide-posts.jpg" onerror='this.onerror=null,this.src="/static/img/website/404.jpg"' alt="无需更改源码！让你的Hexo的文章在首页隐藏"></a><div class="content"><a class="title" href="/posts/9c83ed78/" title="无需更改源码！让你的Hexo的文章在首页隐藏">无需更改源码！让你的Hexo的文章在首页隐藏</a><time datetime="2024-07-19T02:22:45.000Z" title="发表于 2024-07-19 10:22:45">2024-07-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/9348d5be/" title="使用Cloudflare加速Docker镜像下载"><img src="https://image.insectmk.cn/hexo-gitee-blog/cover/docker.png" onerror='this.onerror=null,this.src="/static/img/website/404.jpg"' alt="使用Cloudflare加速Docker镜像下载"></a><div class="content"><a class="title" href="/posts/9348d5be/" title="使用Cloudflare加速Docker镜像下载">使用Cloudflare加速Docker镜像下载</a><time datetime="2024-06-13T08:01:10.000Z" title="发表于 2024-06-13 16:01:10">2024-06-13</time></div></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="workboard"><div id="runtimeTextTip"></div></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo_v7.3.0" title="博客框架为Hexo_v7.3.0"><img src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg" alt="博客框架为Hexo_v7.3.0"></a><a class="github-badge" target="_blank" href="https://blog.anheyu.com/" style="margin-inline:5px" data-title="本站使用AnZhiYu主题" title="本站使用AnZhiYu主题"><img src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.9/img/Theme-AnZhiYu-2E67D3.svg" alt="本站使用AnZhiYu主题"></a></p></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div id="footer-bar-tips"><div class="copyright">&copy;2020 - 2024 By <a class="footer-bar-link" href="/" title="InsectMk" target="_blank">InsectMk</a></div></div><div id="footer-type-tips"></div></div><div class="footer-bar-right"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu" title="主题">主题</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="蜀ICP备2023013851号-2">蜀ICP备2023013851号-2</a><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.mps.gov.cn/#/query/webSearch?code=51142202000154" title="川公网安备51142202000154号">川公网安备51142202000154号</a></div></div></div></footer></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="sidebar-site-data site-data is-center"><a href="/archives/" title="archive"><div class="headline">文章</div><div class="length-num">121</div></a><a href="/tags/" title="tag"><div class="headline">标签</div><div class="length-num">117</div></a><a href="/categories/" title="category"><div class="headline">分类</div><div class="length-num">14</div></a></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><a class="darkmode_switchbutton menu-child" href="javascript:void(0);" title="显示模式"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span>显示模式</span></a></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://insectmk.cn/" title="主博客"><img class="back-menu-item-icon" src="/static/img/website/favicon.jpg" alt="主博客"><span class="back-menu-item-text">主博客</span></a><a class="back-menu-item" href="https://insectmk.top/" title="次博客"><img class="back-menu-item-icon" src="/static/img/website/favicon.jpg" alt="次博客"><span class="back-menu-item-text">次博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://gitee.com/insectmk/chatbot-web" title="智能聊天机器人网站"><img class="back-menu-item-icon" src="https://image.insectmk.cn/hexo-gitee-blog/project/icon/chatbot-web.jpg" alt="智能聊天机器人网站"><span class="back-menu-item-text">智能聊天机器人网站</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-home"></use></svg><span>主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-hand-peace"></use></svg><span>娱乐</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/entertainment/gallery/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-images"></use></svg><span>图库</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-comments"></use></svg><span>交流</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/contact/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-paper-plane"></use></svg><span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/contact/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-link"></use></svg><span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-compass"></use></svg><span>目录</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-archive"></use></svg><span>分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-tags"></use></svg><span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-folder-open"></use></svg><span>归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-server"></use></svg><span>服务</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/server/left4dead2/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-icons-left__dead_"></use></svg><span>求生之路</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/server/minecraft/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-minecraft"></use></svg><span>我的世界</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-clipboard"></use></svg><span>日志</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/log/website/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-website-with-different-sections"></use></svg><span>个人网站</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/log/pc/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-desktop"></use></svg><span>个人电脑</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-bars"></use></svg><span>其他</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/extend/remind/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-note"></use></svg><span>备忘</span></a></li></ul></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-id-card"></use></svg><span>关于</span></a></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/AOP/" style="font-size:.88rem">AOP<sup>1</sup></a><a href="/tags/Butterfly/" style="font-size:.88rem">Butterfly<sup>4</sup></a><a href="/tags/Docker/" style="font-size:.88rem">Docker<sup>6</sup></a><a href="/tags/ElementUI/" style="font-size:.88rem">ElementUI<sup>1</sup></a><a href="/tags/Frp/" style="font-size:.88rem">Frp<sup>1</sup></a><a href="/tags/Hexo/" style="font-size:.88rem;font-weight:500;color:var(--anzhiyu-lighttext)">Hexo<sup>8</sup></a><a href="/tags/IntelliJ-IDEA/" style="font-size:.88rem">IntelliJ IDEA<sup>1</sup></a><a href="/tags/JDK/" style="font-size:.88rem">JDK<sup>1</sup></a><a href="/tags/JWT/" style="font-size:.88rem">JWT<sup>1</sup></a><a href="/tags/Java/" style="font-size:.88rem">Java<sup>35</sup></a><a href="/tags/Junit/" style="font-size:.88rem">Junit<sup>1</sup></a><a href="/tags/Leanote/" style="font-size:.88rem">Leanote<sup>1</sup></a><a href="/tags/Maven/" style="font-size:.88rem">Maven<sup>2</sup></a><a href="/tags/MyBatisPlus/" style="font-size:.88rem">MyBatisPlus<sup>1</sup></a><a href="/tags/MySQL5-7/" style="font-size:.88rem">MySQL5.7<sup>1</sup></a><a href="/tags/Mybatis/" style="font-size:.88rem">Mybatis<sup>1</sup></a><a href="/tags/MybatisPlus/" style="font-size:.88rem">MybatisPlus<sup>1</sup></a><a href="/tags/OSS/" style="font-size:.88rem">OSS<sup>1</sup></a><a href="/tags/Spring/" style="font-size:.88rem">Spring<sup>2</sup></a><a href="/tags/Spring-Boot/" style="font-size:.88rem">SpringBoot<sup>6</sup></a><a href="/tags/Vue2/" style="font-size:.88rem">Vue2<sup>9</sup></a><a href="/tags/Vue3/" style="font-size:.88rem">Vue3<sup>1</sup></a><a href="/tags/Vuetify/" style="font-size:.88rem">Vuetify<sup>1</sup></a><a href="/tags/Vuex/" style="font-size:.88rem">Vuex<sup>1</sup></a><a href="/tags/Waline/" style="font-size:.88rem">Waline<sup>3</sup></a><a href="/tags/mvc/" style="font-size:.88rem">mvc<sup>3</sup></a><a href="/tags/mybatis/" style="font-size:.88rem">mybatis<sup>1</sup></a><a href="/tags/profile/" style="font-size:.88rem">profile<sup>1</sup></a><a href="/tags/spring/" style="font-size:.88rem">spring<sup>5</sup></a><a href="/tags/springboot/" style="font-size:.88rem">springboot<sup>4</sup></a><a href="/tags/transaction/" style="font-size:.88rem">transaction<sup>1</sup></a><a href="/tags/yaml/" style="font-size:.88rem">yaml<sup>2</sup></a><a href="/tags/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" style="font-size:.88rem">个人博客<sup>11</sup></a><a href="/tags/%E4%BA%8B%E5%8A%A1/" style="font-size:.88rem">事务<sup>1</sup></a><a href="/tags/%E5%88%86%E9%A1%B5/" style="font-size:.88rem">分页<sup>1</sup></a><a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size:.88rem;font-weight:500;color:var(--anzhiyu-lighttext)">前端<sup>1</sup></a><a href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size:.88rem">服务器<sup>20</sup></a><a href="/tags/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/" style="font-size:.88rem">毕业设计<sup>14</sup></a><a href="/tags/%E7%A6%85%E9%81%93/" style="font-size:.88rem">禅道<sup>1</sup></a><a href="/tags/%E7%BB%BF%E8%89%B2%E8%A7%A3%E5%8E%8B/" style="font-size:.88rem">绿色解压<sup>1</sup></a></div></div><hr></div></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="anzhiyufont anzhiyu-icon-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="anzhiyufont anzhiyu-icon-gear"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="anzhiyufont anzhiyu-icon-list-ul"></i></button><button id="chat-btn" type="button" title="聊天"><i class="anzhiyufont anzhiyu-icon-comment-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="anzhiyufont anzhiyu-icon-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><div id="nav-music"><a id="nav-music-hoverTips" onclick="anzhiyu.musicToggle()" accesskey="m">播放音乐</a><div id="console-music-bg"></div><meting-js id="975968032" server="netease" type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random" volume="0.7"></meting-js></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="anzhiyufont anzhiyu-icon-xmark"></i></button></nav><div class="is-center" id="loading-database"><i class="anzhiyufont anzhiyu-icon-spinner anzhiyu-pulse-icon"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="anzhiyufont anzhiyu-icon-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="anzhiyufont anzhiyu-icon-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right" style="font-size:1rem"></i></div><div class="rightMenu-item" id="menu-top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="anzhiyufont anzhiyu-icon-paste"></i><span>粘贴文本</span></div><a class="rightMenu-item" id="menu-commenttext"><i class="anzhiyufont anzhiyu-icon-comment-medical"></i><span>引用到评论</span></a><div class="rightMenu-item" id="menu-newwindow"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="anzhiyufont anzhiyu-icon-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="anzhiyufont anzhiyu-icon-images"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="anzhiyufont anzhiyu-icon-download"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-newwindowimg"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开图片</span></div><div class="rightMenu-item" id="menu-search"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>站内搜索</span></div><div class="rightMenu-item" id="menu-searchBaidu"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>百度搜索</span></div><div class="rightMenu-item" id="menu-music-toggle"><i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span></div><div class="rightMenu-item" id="menu-music-back"><i class="anzhiyufont anzhiyu-icon-backward"></i><span>切换到上一首</span></div><div class="rightMenu-item" id="menu-music-forward"><i class="anzhiyufont anzhiyu-icon-forward"></i><span>切换到下一首</span></div><div class="rightMenu-item" id="menu-music-playlist" onclick="window.open(&quot;https://y.qq.com/n/ryqq/playlist/8802438608&quot;, &quot;_blank&quot;);" style="display:none"><i class="anzhiyufont anzhiyu-icon-radio"></i><span>查看所有歌曲</span></div><div class="rightMenu-item" id="menu-music-copyMusicName"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制歌名</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" id="menu-randomPost"><i class="anzhiyufont anzhiyu-icon-shuffle"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="anzhiyufont anzhiyu-icon-cube"></i><span>博客分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item" id="menu-copy" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制地址</span></a><a class="rightMenu-item" id="menu-commentBarrage" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-message"></i><span class="menu-commentBarrage-text">关闭热评</span></a><a class="rightMenu-item" id="menu-darkmode" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></a><a class="rightMenu-item" id="menu-translate" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-language"></i><span>轉為繁體</span></a></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.umd.js"></script><script src="https://cdn.cbd.int/instant.page@5.2.0/instantpage.js" type="module"></script><script src="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.js"></script><canvas id="universe"></canvas><script async src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/dark/dark.js"></script><script>var HoldLog=console.log;console.log=function(){};let now1=new Date;queueMicrotask(()=>{function o(){HoldLog.apply(console,arguments)}var c=new Date("04/11/2022 14:03:44"),c=(now1.setTime(now1.getTime()+250),(now1-c)/1e3/60/60/24),c=["欢迎使用安知鱼!","生活明朗, 万物可爱",`
        
       █████╗ ███╗   ██╗███████╗██╗  ██╗██╗██╗   ██╗██╗   ██╗
      ██╔══██╗████╗  ██║╚══███╔╝██║  ██║██║╚██╗ ██╔╝██║   ██║
      ███████║██╔██╗ ██║  ███╔╝ ███████║██║ ╚████╔╝ ██║   ██║
      ██╔══██║██║╚██╗██║ ███╔╝  ██╔══██║██║  ╚██╔╝  ██║   ██║
      ██║  ██║██║ ╚████║███████╗██║  ██║██║   ██║   ╚██████╔╝
      ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝   ╚═╝    ╚═════╝
        
        `,"已上线",Math.floor(c),"天","©2020 By 安知鱼 V1.6.12"],e=["NCC2-036","调用前置摄像头拍照成功，识别为【小笨蛋】.","Photo captured: ","🤪"];setTimeout(o.bind(console,`
%c${c[0]} %c ${c[1]} %c ${c[2]} %c${c[3]}%c ${c[4]}%c ${c[5]}

%c ${c[6]}
`,"color:#425AEF","","color:#425AEF","color:#425AEF","","color:#425AEF","")),setTimeout(o.bind(console,`%c ${e[0]} %c ${e[1]} %c 
${e[2]} %c
${e[3]}
`,"color:white; background-color:#4fd953","","",'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%')),setTimeout(o.bind(console,"%c WELCOME %c 你好，小笨蛋.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c ⚡ Powered by 安知鱼 %c 你正在访问 InsectMk 的博客.","color:white; background-color:#f0ad4e","")),setTimeout(o.bind(console,"%c W23-12 %c 你已打开控制台.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c S013-782 %c 你现在正处于监控中.","color:white; background-color:#d9534f",""))})</script><script async src="/anzhiyu/random.js"></script><script async>!function(){var n,r,o,a,i,e=new Date("04/11/2022 14:03:44"),l=new Date;setInterval(()=>{var t;if(l=new Date,i=l.getHours(),t=(l-e)/1e3/60/60/24,n=Math.floor(t),t=(l-e)/1e3/60/60-24*n,r=Math.floor(t),1==String(r).length&&(r="0"+r),t=(l-e)/1e3/60-1440*n-60*r,o=Math.floor(t),1==String(o).length&&(o="0"+o),t=(l-e)/1e3-86400*n-3600*r-60*o,a=Math.round(t),1==String(a).length&&(a="0"+a),document.getElementById("footer")){let e="";e=(i<18&&9<=i||null!=(t=document.querySelector("#workboard .workSituationImg"))&&(t.src="",t.title="",t.alt=""),`本站居然运行了 ${n} 天<span id='runtime'> ${r} 小时 ${o} 分 ${a} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:red'></i>`),document.getElementById("runtimeTextTip")&&(document.getElementById("runtimeTextTip").innerHTML=e)}},1e3)}()</script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{let e=()=>{Waline.init(Object.assign({el:"#waline-wrap",serverURL:"https://waline-server.insectmk.cn/",pageview:!0,dark:'html[data-theme="dark"]',path:window.location.pathname,comment:!0},{reaction:["/static/img/waline/tieba_agree.png","/static/img/waline/tieba_look_down.png","/static/img/waline/tieba_sunglasses.png","/static/img/waline/tieba_pick_nose.png","/static/img/waline/tieba_awkward.png","/static/img/waline/tieba_sleep.png"],requiredMeta:["nick","mail"],locale:{placeholder:"欢迎评论哟~"}}))};var i=async()=>{"object"==typeof Waline||(await getCSS("https://cdn.cbd.int/@waline/client@2.15.5/dist/waline.css"),await getScript("https://cdn.cbd.int/@waline/client@2.15.5/dist/waline.js")),e()};setTimeout(i,0)})()</script><input type="hidden" name="page-type" id="page-type" value="post"></div><script>window.addEventListener("load",()=>{let t=e=>e=""!==e&&150<(e=(e=(e=(e=e.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length?e.substring(0,150)+"...":e,a=t=>{let a="";if(t.length)for(let e=0;e<t.length;e++)a=(a=(a+="<div class='aside-list-item'>")+`<a href='${t[e].url}' class='thumbnail'><img src='${t[e].avatar}' alt='${t[e].nick}'></a>`)+`<div class='content'>
        <a class='comment' href='${t[e].url}' title='${t[e].content}'>${t[e].content}</a>
        <div class='name'><span>${t[e].nick} / </span><time datetime="${t[e].date}">${anzhiyu.diffDate(t[e].date,!0)}</time></div>
        </div></div>`;else a+="没有评论";var e=document.querySelector("#card-newest-comments .aside-list");e&&(e.innerHTML=a),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(e)};var e=()=>{var e;document.querySelector("#card-newest-comments .aside-list")&&((e=saveToLocal.get("waline-newest-comments"))?a(JSON.parse(e)):(async()=>{try{var e=(await(await fetch("https://waline-server.insectmk.cn/api/comment?type=recent&count=6",{method:"GET"})).json()).data.map(e=>({content:t(e.comment),avatar:e.avatar,nick:e.nick,url:e.url+"#"+e.objectId,date:e.time||e.insertedAt}));saveToLocal.set("waline-newest-comments",JSON.stringify(e),10/1440),a(e)}catch(e){console.error(e),document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}})())};e(),document.addEventListener("pjax:complete",e)})</script><script>var visitorMail=""</script><script async data-pjax src="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/waterfall/waterfall.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.9/icon/ali_iconfont_css.css"><script async src="//at.alicdn.com/t/c/font_3795172_6hp27xdg2x7.js"></script><script>(()=>{var a,t,h,e;window.ChatraSetup={startHidden:!0},window.chatBtnFn=()=>{document.getElementById("chatra").classList.contains("chatra--expanded")?(Chatra("minimizeWidget"),Chatra("hide")):(Chatra("openChat",!0),Chatra("show"))};a=document,t=window,h="Chatra",t.ChatraID="SjkKhfiLMpdfaPPhc",e=a.createElement("script"),t[h]=t[h]||function(){(t[h].q=t[h].q||[]).push(arguments)},e.async=!0,e.src="https://call.chatra.io/chatra.js",a.head&&a.head.appendChild(e)})()</script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/aplayer/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/anzhiyu-blog-static@1.0.1/js/APlayer.min.js"></script><script src="https://cdn.cbd.int/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js"></script><script src="https://cdn.cbd.int/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",function(){if(anzhiyu.removeGlobalFnEvent("pjax"),anzhiyu.removeGlobalFnEvent("themeChange"),document.getElementById("rightside").classList.remove("rightside-show"),window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();var e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode")}),document.addEventListener("pjax:complete",function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach(e=>{let t=document.createElement("script");var a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)}),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()}),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404")})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script charset="UTF-8" src="https://cdn.cbd.int/anzhiyu-theme-static@1.1.5/accesskey/accesskey.js"></script></div><div id="popup-window"><div class="popup-window-title">通知</div><div class="popup-window-divider"></div><div class="popup-window-content"><div class="popup-tip">你好呀</div><div class="popup-link"><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i></div></div></div></body></html>